<template>
  <Content title="设备列表">
    <view class="all-view">
      <view class="header-box">
        <view class="input-box">
          <view class="my-select-box">
            <MySelect
              v-model="workCode"
              :option="optionA"
              :clearable="false"
            ></MySelect>
            <u-input
              v-if="workCode === '工单号'"
              v-model="search.workCode"
              class="input"
              @change="onRefresh"
              placeholder="请输入筛选条件"
              clearable
            ></u-input>
            <u-input
              v-else
              v-model="search.deviceCode"
              class="input"
              @change="onRefresh"
              placeholder="请输入筛选条件"
              clearable
            ></u-input>
          </view>
          <view class="icon" @click="open">
            <u-icon name="pushpin" color="#b6b6b6" size="28"></u-icon>
          </view>
        </view>

        <view class="nav-list-box">
          <MyNavList
            :data="navData"
            v-model="navIndex"
            @change="myNavListChange"
          ></MyNavList>
        </view>
      </view>

      <view class="main-box">
        <template v-if="data && data.length === 0">
          <Empty></Empty>
        </template>
        <List
          ref="orderList"
          v-else
          :scrollNoData="scrollNoData"
          :data="data"
          @ok="ok"
          @onRefresh="onRefresh"
          @scrollBottom="scrollBottom"
        ></List>
      </view>
    </view>
    <u-popup :show="show" mode="right" @close="close" @open="open">
      <view class="popup-box">
        <view class="title">筛选项</view>
        <u-collapse :value="['1', '2']" ref="collapse">
          <u-collapse-item
            title="设备品牌"
            name="1"
            style="height: 500px; overflow: auto"
          >
            <MySelectBlock
              :arr="brandData"
              @mounted="mySelectBlockMounted"
              v-model="brand"
            ></MySelectBlock>
          </u-collapse-item>
          <u-collapse-item title="工单状态" name="2">
            <MySelectBlock
              dictCode="工单状态"
              @mounted="mySelectBlockMounted"
              v-model="workState"
            ></MySelectBlock>
          </u-collapse-item>
        </u-collapse>

        <view class="btn-v">
          <view class="but-box">
            <u-button class="btn" text="取消" @click="collapseClose"></u-button>
            <u-button
              class="btn"
              @click="collapseChange"
              type="primary"
              text="确定"
            ></u-button>
          </view>
        </view>
      </view>
    </u-popup>
  </Content>
</template>

<script>
import MySelect from "@/components/mySelect";
import MySelectBlock from "@/components/mySelectBlock";
import MyNavList from "@/components/myNavList";
import Content from "@/components/content/index.vue";
import Empty from "@/components/empty";
import List from "./components/list";
import fetch from "@/utils/fetch";
import { getUserInfo } from "@/store/user";
export default {
  components: {
    MySelect,
    Empty,
    Content,
    List,
    MyNavList,
    MySelectBlock,
  },
  data() {
    return {
      search: {
        workCode: "",
        deviceCode: "",
        pageNum: 1,
        pageSize: 10,
        workState: "",
        brand: "",
      },
      navIndex: 0,
      navData: [],
      workCode: "工单号",
      optionA: [
        {
          label: "工单号",
          value: "工单号",
        },
        {
          label: "设备编号",
          value: "设备编号",
        },
      ],
      data: [],
      show: false,
      scroll: false,
      scrollNoData: false,
      brand: [],
      workState: [],
      brandData: [],
    };
  },
  mounted() {
    this.init();
    this.getList(true);
  },
  methods: {
    myNavListChange(data, index) {
      console.log("data", data);
      // this.search.workState = data;
      this.getList(true);
    },
    init() {
      fetch("get", "/dms/mobile/device/status").then(({ data }) => {
        console.log("data-----------", data);
        this.navData = Object.entries(data.statusMap).map((item) => {
          return {
            label: item[0],
            value: item[1] ? parseInt(item[1]) : 0,
          };
        });
      });
      fetch("get", "/dms/mobile/device/brand").then(({ data }) => {
        this.brandData = data.map((item) => {
          return {
            label: item,
            value: item,
          };
        });
      });
      fetch("get", "/dms/mobile/device/state/count").then(({ data }) => {
        let navData = [];
        for (const key in data) {
          if (Object.hasOwnProperty.call(data, key)) {
            const element = data[key];
            switch (key) {
              case "allCount":
                navData.push({
                  label: "全部",
                  value: element,
                });
                break;
              case "runCount":
                navData.push({
                  label: "运行",
                  value: element,
                });
                break;
              case "waitCount":
                navData.push({
                  label: "待机",
                  value: element,
                });
                break;
              case "downtimeCount":
                navData.push({
                  label: "停机",
                  value: element,
                });
                break;
            }
          }
        }
        this.navData = navData;
      });
    },
    open() {
      this.show = true;
    },
    close() {
      this.show = false;
    },
    onRefresh() {
      this.$loading.open();
      this.getList(true);
    },
    mySelectBlockMounted() {
      this.$nextTick(() => {
        this.$refs.collapse.init();
      });
    },
    collapseChange() {
      this.show = false;
      this.search.workState = this.workState[0];
      this.search.brand = this.brand[0];
      this.onRefresh();
    },
    collapseClose() {
      this.show = false;
      this.workState = [this.search.workState];
      this.brand = [this.search.brand];
    },
    ok() {},
    scrollBottom(next) {
      const that = this;
      if (!that.scrollNoData) {
        that.search.pageNum = that.search.pageNum + 1;
        that.scroll = true;
        that.getList().then(() => {
          next(that.scrollNoData);
        });
        return;
      }
      next();
    },
    getList(arg) {
      const that = this;
      that.$loading.open();
      if (arg) {
        that.search.pageNum = 1;
        that.scroll = false;
        that.scrollNoData = false;
        that.data = [];
      }
      if (this.workCode === "工单号") {
        delete that.search.deviceCode;
      } else {
        delete that.search.workCode;
      }
      let obj = {};
      for (const key in that.search) {
        if (Object.hasOwnProperty.call(that.search, key)) {
          const element = that.search[key];
          if (Array.isArray(element) ? element.length > 0 : element)
            obj[key] = element;
        }
      }
      return fetch("get", "/dms/mobile/device/page", obj).then(({ data }) => {
        if (that.scroll) {
          if ((data?.list || []).length === 0) {
            that.scrollNoData = true;
          } else {
            that.data.push(...data?.list);
          }
        } else {
          that.data = data?.list || [];
        }
        that.$loading.close();
      });
    },
  },
};
</script>

<style scoped lang="scss">
.all-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header-box {
  padding: 5px 20px;
  background-color: #ffffff;
}
.nav-list-box {
  display: flex;
  overflow: auto;
  padding: 0 20px;
  margin-bottom: 10px;
  background-color: #ffffff;
}
.input-box {
  display: flex;
  align-items: center;
  overflow: auto;

  .my-select-box {
    flex: 1;
    background-color: #f3f5f6;
    margin-right: 20rpx;
    display: flex;
    border: 1px solid #e0e0e0;
    border-radius: 5px;

    /deep/ .my-select {
      width: 104px;
    }
  }

  /deep/ .u-input {
    border: none;
    background-color: transparent;
  }

  .icon {
  }
}

.nav-list-box {
  margin-bottom: 20rpx;
}

.main-box {
  padding: 20rpx;
  flex: 1;
  overflow: auto;
}

.action-box {
  width: 100%;
  padding: 10px 20px;
  margin-bottom: 10px;
  background-color: #ffffff;
}
</style>
